<template>
  <div class="account-list">
    <common-breadcrumb :crumb="crumb"></common-breadcrumb>
    <el-card>
      <el-table :data="tableData" border stripe>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="账号状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.account_status === 1" type="success">账号已启用</el-tag>
            <el-tag v-else type="danger">账号已信用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="contact"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="modifyUser(scope.$index)">修改</el-button>
            <el-button type="danger" size="mini" @click="deleteAccount(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-drawer
      title="修改账号"
      :visible.sync="drawer"
      :direction="direction">
      <el-row :gutter="15">
        <el-col :span="6" class="align-right">用户名 :</el-col>
        <el-col :span="18">{{drawerData.username}}</el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="6" class="align-right">账号状态 :</el-col>
        <el-col :span="18">
          <el-tag type="success" v-if="drawerData.account_status === 1">账号启用中</el-tag>
          <el-tag type="danger" v-else>账号已停用</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="6" class="align-right">联系方式 :</el-col>
        <el-col :span="18">{{drawerData.contact}}</el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button type="danger" size="mini" v-if="drawerData.account_status === 1" @click="disableAccount(drawerData.id)">禁用账号</el-button>
          <el-button type="danger" size="mini" v-else @click="enableAccount(drawerData.id)">启用账号</el-button>
          <el-tooltip class="item" effect="dark" content="密码将重置为123456" placement="top">
            <el-button type="warning" size="mini" @click="resetPassword(drawerData.id)">重置密码</el-button>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import commonBreadcrumb from '../../components/common/Breadcrumb'
export default {
  components: {
    commonBreadcrumb
  },
  data () {
    return {
      crumb: ['管理', '账号列表'],
      tableData: [],
      drawer: false,
      direction: 'rtl',
      drawerData: {}
    }
  },
  created () {
    this.getAccountList()
  },
  methods: {
    async getAccountList () {
      const { data: res } = await this.$axios.get('user')
      if (res.code === 1) {
        this.tableData = res.result
        return false
      }
      this.$message.error('获取账户列表失败')
    },
    modifyUser (index) {
      this.drawer = true
      this.drawerData = this.tableData[index]
    },
    // 禁用账号
    async disableAccount (id) {
      const { data: res } = await this.$axios.put('user', {
        id,
        action: 'disable'
      })
      if (res.code === 1) {
        this.drawerData.account_status = 0
        this.$message.success('账号禁用成功')
        this.getAccountList()
      }
    },
    // 启用账号
    async enableAccount (id) {
      const { data: res } = await this.$axios.put('user', {
        id,
        action: 'enable'
      })
      if (res.code === 1) {
        this.drawerData.account_status = 1
        this.$message.success('账号启用成功')
        this.getAccountList()
      }
    },
    // 重置密码
    async resetPassword (id) {
      const { data: res } = await this.$axios.put('user', {
        id,
        action: 'resetPassword'
      })
      if (res.code === 1) {
        this.$message.success('更新密码成功')
      }
    },
    // 删除账号
    async deleteAccount (id) {
      const { data: res } = await this.$axios.delete(`user/${id}`)
      if (res.code === 1) {
        this.$message.error('不能删除超级管理员')
        return false
      }
      if (res.code === 2) {
        this.$message.success('删除成功')
        this.getAccountList()
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-drawer__body {
    box-sizing: border-box;
    padding-left: 20px;
  }
  .el-row {
    margin-bottom: 15px;
    padding-left: 20px;
    line-height: 40px;
    .align-right {
      text-align: right;
    }
  }
</style>
